<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app"></div>
  <script>
    //针对数组变化的功能
    const listEffect = ()=>{
      const {reactive} = Vue
      let list = reactive([])
      const addItem = (item)=>{
          list.push(item)
      }
      return {list,addItem}
    }
    //针对input变化的功能
    const inputEffect = ()=>{
      const {ref} = Vue 
      let iptValue = ref('')
      const hanlderInputValue=(e)=>{
          iptValue.value = e.target.value
      }
      return {iptValue,hanlderInputValue}
    }

    let vm = {
      template:`<div>
                  <input type="text" 
                      :value="iptValue"
                      @input="hanlderInputValue"
                  />
                  {{iptValue}}
                  <button @click="addItem(iptValue)">点击</button>
                  <ul>
                    <li v-for="item in list">
                      {{item}}
                    </li>
                  </ul>
                </div>`,
      setup(){
       //通过结构赋值获取对应的数据和方法
       let {iptValue,hanlderInputValue}= inputEffect() 
       let {list,addItem} = listEffect()
        return{list,iptValue,hanlderInputValue,addItem}
      },
    }
    Vue.createApp(vm).mount('#app')
    
  </script>
</body>
</html>